<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title></title>
        <link rel="stylesheet" href="css/'swiper.css" type="text/css">
    </head>
    <body>
      <!--   <div class="swiper">
            <div class="imgList">
                <div class="imgItem active" style="background-image: url(img/img1.webp);"></div>
                <div class="imgItem" style="background-image: url(img/img2.jpg);"></div>
                <div class="imgItem" style="background-image: url(img/img3.webp);"></div>
                <div class="imgItem" style="background-image: url(img/img4.webp);"></div>
                <div class="imgItem" style="background-image: url(img/img5.webp);"></div>
            </div>
            <div class="btnList">
                <div class="btn pre"><</div>
                <div class="btn next">></div>
            </div>
            <div class="circleList">
                <div id="c0" class="circleItem active"></div>
                <div id="c1" class="circleItem"></div>
                <div id="c2" class="circleItem"></div>
                <div id="c3" class="circleItem"></div>
                <div id="c4" class="circleItem"></div>
            </div>
        </div> -->
        <div class="swiper swiper1"></div>
        <div class="swiper swiper2"></div>
        <div class="swiper swiper3"></div>
        <script src="js/lcSwiper_函数.js" type="text/javascript" charset="utf-8"/></script>
        <script src="js/lcSwiper_构造函数.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/LcSwiper_class方式.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
                var imgList = ["img/img1.webp", "img/img2.jpg", "img/img3.webp", "img/img4.webp", "img/img5.webp"];
                var swiper1 = swiper(".swiper1",imgList);       //普通函数封装
                var swiper3 = new wtSwiper(".swiper3",imgList)   //class方式
                var swiper2 = new WtSwiper(".swiper2",imgList);   //构造函数封装
               
/*                  var imgListDivs = document.querySelectorAll(".swiper .imgItem");
                var btnNext = document.querySelector(".swiper .next");
                var btnPre = document.querySelector(".swiper .pre");
                var circleListDivs = document.querySelectorAll(".swiper .circleItem");
                var currentImg = 0;
                console.log(imgListDivs);
                function renderImg(){
                    imgListDivs.forEach(function(item,i){
                        item.classList.remove("active");
                    });
                    circleListDivs.forEach(function (item, i) {
                        item.classList.remove("active");
                    })
                    imgListDivs[currentImg].classList.add("active");
                    circleListDivs[currentImg].classList.add("active");
                }

                btnNext.onclick = function(){
                    currentImg = currentImg +1;
                    if(currentImg > imgListDivs.length - 1){
                        currentImg = 0;
                    }
                    renderImg();
                };

                btnPre.onclick = function () {
                        currentImg = currentImg - 1;
                        if (currentImg < 0) {
                            currentImg = imgListDivs.length - 1;
                        }
                        renderImg();
                    };
                circleListDivs.forEach(function(item,i){
                    item.onclick = function () {
                        var index = parseInt(item.id[1]);
                        currentImg = index;
                        renderImg();
                    };
                }); 
                
 */

        </script>
    </body>
</html>